<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>订单列表</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
    <link href="../../css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/all-like-orderlist.css">
    <link rel="stylesheet" href="../../css/complaint.css">
    <link rel="stylesheet" href="../../css/jquery.pagination.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../dist/js/bootstrap.js"></script>
    <!--引入时间插件-->
    <script src="../js/moment-with-locals.min.js"></script>
    <script src="../js/bootstrap-datetimepicker.js"></script>
    <script>
        $(document).ready(function() {
            $("#datetimepicker").datetimepicker({
                format: "yyyy-mm",
                weekStart: 1,
                autoclose: true,
                startView: 3,
                minView: 3,
                forceParse: false,
                endDate: new Date(), // 窗口可选时间从今天开始
                pickerPosition: "bottom-left"
            });
            $("#datetimepicker2").datetimepicker({
                format : "yyyy-mm",
                weekStart : 1,
                autoclose : true,
                startView : 3,
                minView : 3,
                forceParse : false,
                endDate : new Date(), // 窗口可选时间从今天开始
                pickerPosition : "bottom-left"

            });
            //批量删除，获得批量编号
            $(".delbtn").click(function(){
                var ids = BBB('ck');
                alert(ids);
            });
        })
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="solid-hr row">
        <i></i>投诉列表
    </div>
    <div class="filter row">
        <div class="select-options">
            <h3>投诉筛选</h3>
            <div class="filter-state">
                <span class="filter-name">投诉状态:</span>
                <ul class="filter-items clearfix">
                    <li><a href="/system/complaint0">全部</a></li>
                    <li><a href="/system/complaint1">已解决</a></li>
                    <li><a href="/system/complaint2">处理中</a></li>
                </ul>
            </div>
            <div class="filter-time">
                <span class="filter-name">投诉时间:</span>
                <!--始末日期-->
                <div class="form-group form-style col-md-3">
                    <div class='input-group date' id='datetimepicker'>
                        <input type='text' class="form-control" id="startDate" value="" placeholder="请选择开始月份"/> <span class="input-group-addon"> <span
                            class="glyphicon glyphicon-calendar"></span> </span>
                    </div>
                </div>
                <div class="form-group form-style form-end col-md-3">
                    <div class='input-group date' id='datetimepicker2'>
                        <input type='text' class="form-control" id="stopDate" placeholder="请选择结束月份"/> <span class="input-group-addon"> <span
                            class="glyphicon glyphicon-calendar"></span> </span>
                    </div>
                    <i class="relat">——</i>
                </div>
                <input type="button" class="btn btn-success sub" onclick="selectOrder()" value="查询">
            </div>
        </div>
    </div>
    <!--表格-->
    <div class="table-list row">
        <table class="table table-bordered">
            <thead>
            <tr class="active">
                <td>编号</td>
                <td>用户名</td>
                <td>投诉人姓名</td>
                <td>投诉事由</td>
                <td>投诉时间</td>
                <td>投诉状态</td>
                <td>处理人</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tb" th:each="p : ${pagination.list}">
            <tr>
                <td th:text="${p.id}"></td>
                <td th:text="${p.username}">hys20180716</td>
                <td th:text="${p.name}">张三</td>
                <td th:text="${p.reason}">洗衣服没有洗干净</td>
                <td th:text="${p.date}">2018-07-17</td>
                <td ><i th:text="${p.status}">处理中</i></td>
                <td th:text="${p.person}">严浩</td>
                <td>
                    <img src="../images/solving.png" onclick="updateBtn(this)" alt="处理中">
                    <img src="../images/solved.png" onclick="updateBtn(this)" alt="已解决">
                    <img src="../images/edits03.png" onclick="lick(this, this.id)" data-toggle="modal" data-target="#exampleModal" data-whatever="查看投诉详情"  />
                    <img src="../images/delete03.png" class="delBtnImg" data-toggle="modal" data-target="#delModal" onclick="obtainDeleteId(this)"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!--分页-->
    <div class="page-right">
        <div id="pagination3" class="page fl"></div>
    </div>
    <span th:text="${pagination.totalPage}"style="display: none"id="totalPage"></span>
    <!--修改弹框-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label"><i>*</i>投诉人</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="cp_content"><i>*</i>投诉内容</label>
                            <textarea class="form-control" rows="3" id="cp_content"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!--删除确定弹框-->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="delModalLabel"><img src="../images/delete02.png"/></h4>
                </div>
                <div class="modal-body del-title">
                    你确定要删除该内容？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="deleteBtn()" data-dismiss="modal" >确定</button>
                    <button type="button" class="btn btn-default btn-333" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/checkbox.js"></script>
<script src="../../js/jquery.pagination.min.js"></script>
<script>
    var totalPage = $("#totalPage").text();
    $("#pagination3").pagination({
        totalPage: totalPage,
        isShow: true,
        count: totalPage,
        homePageText: "首页",
        endPageText: "尾页",
        prevPageText: "上一页",
        nextPageText: "下一页",
        callback: function(current){
            page(current)
        }
    })
    function selectOrder(){
        page(1);
    }
    function page(current) {
        var startDate = $("#startDate").val() ;
        var stopDate = $("#stopDate").val() ;
        var Pagination  ={
            currentPage : current-1,
            size : 8,
            startDate : startDate,
            stopDate : stopDate,
        }
        if(current<= totalPage){
            var html ='';
            $.ajax({
                url:"/system/selectComplaintDate",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                    console.log(data.list);
                    $(".old").css("display","none");
                    $.each(data.list,function (n,val) {
                        html += " <tr>" +
                            "<td><input name='ck' type='checkbox' value='"+ val.id+"'></td>"+
                            "<td>"+val.username+"</td>"+
                            "<td>"+val.name+"</td>"+
                            "<td>"+val.reason+"</td>"+
                            "<td>"+formatDate(new Date(val.date))+"</td>"+
                            "<td>"+val.status+"</td>"+
                            "<td>"+val.person+"</td>"+
                            "<td>" +
                            "<img src='../images/solving.png' onclick='updateBtn(this)' alt='处理中'>" +
                            "<img src='../images/solved.png' onclick='updateBtn(this)' alt='已解决'>" +
                            "<img src='../images/edits03.png' onclick='lick(this, this.id)' data-toggle='modal' data-target='#exampleModal' data-whatever='查看投诉详情'  />" +
                            "<img src='../images/delete03.png' class='delBtnImg' data-toggle='modal' data-target='#delModal'/>" +
                            "</td>"+
                            "</tr>"
                    })
                    if(html == ""){
                        html = "<tr> <td style='background-color: #E6E6E6;height:200px; text-align: center;padding-top: 100px' colspan=10><h4 style='color: #A4A4A4;'>没有满足该条件的记录</h4></td></tr>"
                    }
                    $("#tb").html(html);
                },

            });
        }
    }
    var deleteId ;
    function obtainDeleteId(btnImg){
        var td_content = $(btnImg).parents("tr").children("td");  //获取当前行中的所有td值
        deleteId = td_content.eq(0).text(); //获取当前行第二个td的值
    }

    function deleteBtn(){
        var Pagination = {
            id : deleteId,
        }
        $.ajax({
            url:"/system/deleteComplaintStatus",
            contentType:"application/json; charset=utf-8",
            type:"post",
            data : JSON.stringify(Pagination),
            success:function(data){
            }
        });
    }
    $(".filter-items>li").click(function () {
        var liArr = $(this).siblings();
        var len = $(liArr).length;
        for(var i=0;i<len;i++){
            $(liArr[i]).removeClass("select");
        }
        $(this).addClass("select");
    });
    /*展开页面就对处理状态进行初始化*/
    var tdLine = $(".table-list>.table>tbody>tr>td>i");
    var text = $(tdLine).text();
    var len = $(tdLine).length;
    for(var i=0;i<len;i++){
       text = $(tdLine[i]).text();
        if(text=="已解决"){
            $(tdLine[i]).addClass("solved");
        }else if(text=="处理中"){
            $(tdLine[i]).addClass("solving");
        }


    }
    /*btn修改处理状态*/
    function updateBtn(btnImg){
        var td_content = $(btnImg).parents("tr").children("td");  //获取当前行中的所有td值
        var id = td_content.eq(0).text(); //获取当前行第二个td的值
        var text = $(btnImg).attr("alt");
        $(btnImg).parent().prev().prev().find("i").text(text);
        if(text=="已解决"){
            $(btnImg).parent().prev().prev().find("i").addClass("solved").removeClass("solving");
            var Pagination = {
                id : id,
                status : "已解决"
            }
            $.ajax({
                url:"/system/updateComplaintStatus",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                }
            });
        }else if(text=="处理中"){
            $(btnImg).parent().prev().prev().find("i").addClass("solving").removeClass("solved");
            var Pagination = {
                id : id,
                status : "处理中"
            }
            $.ajax({
                url:"/system/updateComplaintStatus",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                }
            });
        }
    }
    function lick(obj, id) {
        var td_content = $(obj).parents("tr").children("td");  //获取当前行中的所有td值
        var id = td_content.eq(2).text(); //获取当前行第二个td的值
        var name = td_content.eq(3).text(); //获取当前行第二个td的值

        document.getElementById('recipient-name').value = id;
        document.getElementById('cp_content').value = name;
    }
    /*delBtnImg确定删除*/
//    $(".delBtnImg").click(function () {
//        var msg = "您真的确定要删除吗？\n\n请确认！";
//        if (confirm(msg)==true){
//            return true;
//        }else{
//            return false;
//        }
//    });
</script>
<!--引入模态框和复选框js-->

</body>
</html>